@extends('app')

@section('content')


    <!-- basic styles -->

    <!-- <link rel="stylesheet" href="{{ asset('/assets/css/font-awesome.min.css') }}" /> -->

    <!--[if IE 7]>
      <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
    <![endif]-->

    <link rel="stylesheet" href="{{ asset('/css/editor.css') }}" />

    <!--[if lte IE 8]>
      <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->

    <script src="{{ asset('/assets/js/ace-extra.min.js') }}"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->


  <div class="wysiwyg-editor" id="editor1"></div>
  <div class="hr hr-double dotted"></div>
                <!-- PAGE CONTENT ENDS -->

    <script type="text/javascript">
      if("ontouchend" in document) document.write("<script src='{{ asset('/assets/js/jquery.mobile.custom.min.js') }}'>"+"<"+"/script>");
    </script>
    <script src="{{ asset('/assets/js/jquery.hotkeys.min.js') }}"></script>
    <script src="{{ asset('/assets/js/bootstrap-wysiwyg.min.js') }}"></script>
    <!-- ace scripts -->
    <script src="{{ asset('/assets/js/ace-elements.min.js') }}"></script>
    <script src="{{ asset('/assets/js/ace.min.js') }}"></script>

    <!-- inline scripts related to this page -->

    <script type="text/javascript">
    function showErrorAlert (reason, detail) {
          var msg='';
          if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
          else {
            console.log("error uploading file", reason, detail);
          }
          $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+
           '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
        }

      jQuery(function($){
  //but we want to change a few buttons colors for the third style
        $('#editor1').css({'height':'600px'}).ace_wysiwyg({
          toolbar:
          [
            'font',
            null,
            'fontSize',
            null,
            {name:'bold', className:'btn-info'},
            {name:'italic', className:'btn-info'},
            {name:'strikethrough', className:'btn-info'},
            {name:'underline', className:'btn-info'},
            null,
            {name:'insertunorderedlist', className:'btn-success'},
            {name:'insertorderedlist', className:'btn-success'},
            {name:'outdent', className:'btn-purple'},
            {name:'indent', className:'btn-purple'},
            null,
            {name:'justifyleft', className:'btn-primary'},
            {name:'justifycenter', className:'btn-primary'},
            {name:'justifyright', className:'btn-primary'},
            {name:'justifyfull', className:'btn-inverse'},
            null,
            {name:'createLink', className:'btn-pink'},
            {name:'unlink', className:'btn-pink'},
            null,
            {name:'insertImage', className:'btn-success'},
            null,
            'foreColor',
            null,
            {name:'undo', className:'btn-grey'},
            {name:'redo', className:'btn-grey'}
          ],
          'wysiwyg': {
            fileUploadError: showErrorAlert
          }
        }).prev().addClass('wysiwyg-style2');



        $('#editor2').css({'height':'300px'}).ace_wysiwyg({
          toolbar_place: function(toolbar) {
            return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar).children(0).addClass('inline');
          },
          toolbar:
          [
            'bold',
            {name:'italic' , title:'Change Title!', icon: 'icon-leaf'},
            'strikethrough',
            null,
            'insertunorderedlist',
            'insertorderedlist',
            null,
            'justifyleft',
            'justifycenter',
            'justifyright'
          ],
          speech_button:false
        });
  //Add Image Resize Functionality to Chrome and Safari
  //webkit browsers don't have image resize functionality when content is editable
  //so let's add something using jQuery UI resizable
  //another option would be opening a dialog for user to enter dimensions.
  if ( typeof jQuery.ui !== 'undefined' && /applewebkit/.test(navigator.userAgent.toLowerCase()) ) {

        var lastResizableImg = null;
        function destroyResizable() {
          if(lastResizableImg == null) return;
          lastResizableImg.resizable( "destroy" );
          lastResizableImg.removeData('resizable');
          lastResizableImg = null;
        }

    var enableImageResize = function() {
      $('.wysiwyg-editor')
      .on('mousedown', function(e) {
        var target = $(e.target);
        if( e.target instanceof HTMLImageElement ) {
          if( !target.data('resizable') ) {
            target.resizable({
              aspectRatio: e.target.width / e.target.height,
            });
            target.data('resizable', true);

            if( lastResizableImg != null ) {//disable previous resizable image
              lastResizableImg.resizable( "destroy" );
              lastResizableImg.removeData('resizable');
            }
            lastResizableImg = target;
          }
        }
      })
      .on('click', function(e) {
        if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
          destroyResizable();
        }
      })
      .on('keydown', function() {
        destroyResizable();
      });
      }

    enableImageResize();

    /**
    //or we can load the jQuery UI dynamically only if needed
    if (typeof jQuery.ui !== 'undefined') enableImageResize();
    else {//load jQuery UI if not loaded
      $.getScript($path_assets+"/js/jquery-ui-1.10.3.custom.min.js", function(data, textStatus, jqxhr) {
        if('ontouchend' in document) {//also load touch-punch for touch devices
          $.getScript($path_assets+"/js/jquery.ui.touch-punch.min.js", function(data, textStatus, jqxhr) {
            enableImageResize();
          });
        } else  enableImageResize();
      });
    }
    */
  }


});
</script>
@endsection
